<!--
@name 索赔单选择
@description 索赔申述详情页面弹窗组件
@author haoyang.ding
@date 2021-2-24
-->
<template>
  <el-dialog
    v-dialogDrag
    width="70%"
    :visible.sync="popupsVisible"
    :title="textMap"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
    @open="open"
  >
    <OneTableTemplate
      ref="multipleTable"
      :dynamic-components="formInputs"
      :dynamic-buttons="formButtons"
      :dynamic-table-cols="tableHeader"
      :dynamic-form-fields="formField"
      :dynamic-api-config="apiConfig"
      :callback-obj="callbackObj"
      :dynamic-is-init-table="false"
      :is-show-pagination="false"
      @chooseEdit="chooseEdit"
    />
  </el-dialog>
<!-- :dynamic-form-fields="formField" -->
</template>

<script>
import OneTableTemplate from '@/components/templates/oneTable'
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { orgApis } from '@/api/apiClaimMangemet'

export default {
  name: 'ClaimSelectDialog',
  components: {
    OneTableTemplate
  },
  mixins: [oneTableWithViewTemplateMixins],
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    hideShow: {
      type: String
    }
  },
  data() {
    return {
      deteleArray: [],
      apiConfig: orgApis.claimChoice,
      formInputs: [
        {
          compKey: 'key0',
          labelName: '申述日期：',
          codeField: 'sendTimeStart,sendTimeEnd',
          isMul: false,
          component: () =>
            import('@/components/org/datePicker/andtDatePicker'),
          isMust: true
        },
        {
          compKey: 'key1',
          labelName: '索赔单号：',
          codeField: 'claimCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key2',
          labelName: '派工单号',
          codeField: 'repairOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true
        },
        {
          compKey: 'key3',
          labelName: '车牌号：',
          codeField: 'carLicense',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false
        },
        {
          compKey: 'key4',
          labelName: 'VIN码',
          codeField: 'vin',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false
        },
        {
          compKey: 'key5',
          labelName: '索赔分类',
          codeField: 'claimTypeCode',
          customObj: {
            api: orgApis.findClaimCategory,
            defOptionFields: ['claimCategoryCode', 'claimCategoryName']
          },
          component: () => import('@/components/org/commonSelect'),
          type: 'dropdownList',
          isMust: true,
          span: 6
        },
        {
          compKey: 'key6',
          labelName: '活动/同意编号：',
          codeField: 'actionCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: false
        },
        {
          compKey: 'key7',
          labelName: '门店编码：',
          codeField: 'dlrCode',
          // isMul: false,
          component: () => import('@/components/ve/carStockHouse'),
          type: 'dropdownList',
          isMust: false
        }
      ],
      formButtons: [
        {
          compKey: 'btnKey0',
          type: '',
          size: 'small',
          clickEvent: () => this.chooseEdit(),
          text: '选择', // 查询
          name: '', // 按钮图标样式
          position: 'right'
          // fuzzySearch: true,
        },
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.querySearch(),
          text: '查询', // 查询
          name: '', // 按钮图标样式
          position: 'right'
        },
        {
          compKey: 'btnKey2',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.$refs['multipleTable'].reset(),
          text: this.$t('sys.button.reset'),
          name: 'reset', // 按钮图标样式
          position: 'right'
        }
      ],
      tableHeader: [
        {
          label: '门店编码',
          prop: 'dlrCode'
        },
        {
          label: '门店名称',
          prop: 'dlrFullName'
        },
        {
          label: '索赔单号',
          prop: 'claimCode'
        },
        {
          label: '索赔分类',
          prop: 'claimType'
        },
        {
          label: '申述日期',
          prop: 'sendTime'
        },
        {
          label: '派工单号',
          prop: 'repairOrderCode'
        },
        {
          label: '活动/同意编号',
          prop: 'actionCode'
        },
        {
          label: '车牌号',
          prop: 'carLicense'
        },
        {
          label: '车主名称',
          prop: 'custName'
        },
        {
          label: '车主电话',
          prop: 'phone'
        },
        {
          label: '索赔费用',
          prop: 'sumAmount'
        },
        {
          label: '索赔工时费',
          prop: 'wiAmount'
        },
        {
          label: '索赔备件费',
          prop: 'partAmount'
        },
        {
          label: '索赔其他费用',
          prop: 'sumOtherAmount'
        }
      ],
      formField: {
        sendTimeStart: '',
        sendTimeEnd: '',
        claimCode: '',
        repairOrderCode: '',
        carLicense: '',
        vin: '',
        claimTypeCode: '',
        actionCode: '',
        dlrCode: ''
      },
      callbackObj: {
        // 手动勾选网格时，拿到勾选网格的数据
        onCheckSelect: (selection, row) => {
          this.deteleArray = selection
        }
      },
      textMap: '索赔单选择'
    }
  },
  mounted() {
    this.$refs['multipleTable'].queryTable(1)
  },
  created() {
  },
  methods: {
    open() {
      console.log(this.hideShow, 'this.hideShow')
      if (this.hideShow !== 'flaw') {
        debugger
        this.$refs['multipleTable'].dynamicTableCols[6].hidden = true
      }
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit('close', false)
    },
    querySearch() {
      this.$refs['multipleTable'].queryTable(1)
    },
    chooseEdit() {
      if (this.deteleArray.length === 1) {
        this.$emit('chooseValue', this.deteleArray)
        this.popupsVisible = false
      } else {
        this.$message({
          message: '请选择一条数据进行操作',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
